import SelectMoreComps from './SelectMoreComps'
import SearchBrandInput from './SearchBrandInput'
import ButtonComs from './ButtonComs'
import checkedimg from '../../../../imgs/checkedimg.png'
import HttpUtils from '../../common/utils/HttpUtils'

export default  class SelectAreaBrand extends React.Component{

    constructor(props){
        super(props)
        const {brandList}=this.props
        let brandList_copy=JSON.parse(JSON.stringify(brandList))
        this.lists=brandList_copy.splice(0,14)
        this.lists2=brandList
        this.state={
            choosed:-1,
            selected_one:-1,
            open:false,     //展开
            multiply:false,  //多选
            lists:this.lists,
            brandInput:''
        }

        this.choosed_brands=[]
        this.choosed_brandIds=[]
    }

    setBrand(){
        const {setBrand}=this.props
        let bransStr=this.choosed_brands.join(',')
        let brandIds=this.choosed_brandIds
        setBrand(bransStr,brandIds)
    }

    clearBrands(){
        this.choosed_brands=[]
        this.choosed_brandIds=[]
    }


    componentWillReceiveProps(nextProps) {
        const {open,multiply}=this.state
        const {brandList}=nextProps
        let brandList_copy=JSON.parse(JSON.stringify(brandList))
        this.lists=brandList_copy.splice(0,14)
        this.lists2=brandList
        this.setState({
            lists:(open||multiply)? this.lists2:this.lists,
        })
    }


    searchBrandList(){
        const {brandInput}=this.state
        const {brandList}=this.props
        if(!brandInput){
            this.setLists(brandList)
            return
        }

        if(brandList){
            let _brandList=brandList.filter((item)=>{

                if(item.name.indexOf(brandInput)>-1){
                    return true
                }
                return false
            })
            this.setLists(_brandList)
        }

    }



    setLists(_brandList){
        const {open,multiply}=this.state
        let brandList_copy=JSON.parse(JSON.stringify(_brandList))
        this.lists=brandList_copy.splice(0,14)
        this.lists2=_brandList
        this.setState({
            lists:(open||multiply)? this.lists2:this.lists,
        })
    }




    render(){
        const {choosed,open,selected_one,multiply,lists}=this.state
        const {setBrand,supp}=this.props
        let len=lists.length

        return(
            <div className={'search-page-select-area-top'}>
                <div className={'search-page-select-brand'}>
                    <p>品牌</p>
                </div>

                <div className={'search-page-select-brand-wrapper'}>
                    {
                        (multiply||open)&&(
                            <SearchBrandInput
                                isSupp={false}
                                onChange={(e)=>{
                                    this.setState({
                                        brandInput:e.target.value
                                    },this.searchBrandList)
                                }}
                                onClick={()=>this.searchBrandList()}
                            />
                        )
                    }
                    <div className={'search-page-select-area-icons'}>
                        {
                            lists.map((item,index)=>(
                                <IconsItemNew
                                    key={index}
                                    index={index}
                                    item={item}
                                    len={len}
                                    multiply={multiply}
                                    choosed={choosed}
                                    selected_one={selected_one}
                                    onMouseOver={()=>{
                                        this.setState({
                                            choosed:index
                                        })
                                    }}
                                    onMouseOut={()=>{
                                        this.setState({
                                            choosed:-1
                                        })
                                    }}
                                    selectOne={()=>{
                                        this.setState({
                                            selected_one:index
                                        })
                                        setBrand(item.name,[item.id])
                                    }}
                                    selectMulti={(type)=>{
                                        if(type=='push'){
                                            this.choosed_brands.push(item.name)
                                            this.choosed_brandIds.push(item.id)
                                        }
                                        else if(type=='splice'){
                                            let brands=this.choosed_brands.filter((brand)=>{
                                                return brand!=item.name
                                            })
                                            let brandIds=this.choosed_brandIds.filter((brand)=>{
                                                return brand!=item.id
                                            })
                                            this.choosed_brands=brands
                                            this.choosed_brandIds=brandIds
                                        }
                                    }}
                                />
                            ))
                        }

                    </div>
                    {
                        multiply&&(
                            <ButtonComs
                                onConfirm={()=>{
                                    this.setState({
                                        multiply:false,
                                        open:false,
                                        selected_one:-1,
                                        lists:open? this.lists2:this.lists
                                    })
                                   this.setBrand()
                                }}
                                onCancle={()=>{
                                    this.setState({
                                        multiply:false,
                                        open:false,
                                        selected_one:-1,
                                        lists:open?this.lists2:this.lists
                                    })
                                    this.clearBrands()
                                }}
                            />
                        )
                    }
                </div>
                {
                    lists&&lists.length>1&&(
                        <SelectMoreComps
                            open={open}
                            multiply={multiply}
                            lists={lists}
                            setOpen={(open)=>{
                                this.setState({
                                    open,
                                    lists:open?this.lists2:this.lists
                                })
                            }}
                            setMultiply={(multiply)=>{
                                this.setState({
                                    multiply,
                                    selected_one:-1,
                                    lists:this.lists2
                                })
                            }}
                        />
                    )
                }



            </div>
        )
    }


}


class IconsItemNew  extends React.Component{
    constructor(){
        super()
        this.state={
            selected:false
        }
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.multiply!=this.props.multiply||nextProps.item!=this.props.item){
            this.setState({
                selected:false
            })
        }
    }

    render(){
        const{index,choosed,selected_one,len,multiply,item,onMouseOver,onMouseOut,selectOne,selectMulti}=this.props
        const {selected}=this.state

        let hasLogo=true
        if(item&&item.picUrl==`https://images.rjmart.cn/images/def/brand.png`){
            hasLogo=false
        }


        if(choosed==index){ //mouseover
            return(
                <div
                    onMouseOver={onMouseOver}
                    onMouseLeave={onMouseOut}
                    onClick={()=>{
                        if(multiply){
                            if(selected){
                                selectMulti('splice')
                            }
                            else{
                                selectMulti('push')
                            }
                            this.setState({
                                selected:!selected
                            })
                            return
                        }
                        selectOne()
                    }}
                    className={this.getClassName(index,choosed,selected_one,selected,multiply,hasLogo)}
                    style={{marginBottom:index>=7*(parseInt((len-1)/7))? 0:10}}
                >
                    <div className={'search-icons-over'}>
                        <img src={item.picUrl} alt="" className={'search-page-select-supp-icon'}/>
                        <p>{item.name}</p>
                    </div>

                    {
                        ((multiply&&selected))&&(
                            <div className={'search-page-select-icons-item-diugou'}>
                                <img src={checkedimg} alt=""/>
                            </div>
                        )
                    }
                </div>
                )

        }
        return(
            <div
                onMouseOver={onMouseOver}
                onMouseLeave={onMouseOut}
                onClick={()=>{

                    if(multiply){
                        if(selected){
                            selectMulti('splice')
                        }
                        else{
                            selectMulti('push')
                        }
                        this.setState({
                            selected:!selected
                        })
                        return
                    }
                    selectOne()
                }}
                className={this.getClassName(index,choosed,selected_one,selected,multiply,hasLogo,this.state.imgError)}
                style={{marginBottom:index>=7*(parseInt((len-1)/7))? 0:10}}
            >
                {
                    !hasLogo?
                        <div className={'search-icons-def-img'}>
                            <p>{item.name}</p>
                        </div>
                        :
                        <LogoImgError
                            isImgError={()=>{this.setState({
                                imgError:true
                            })}}
                            item={item}
                        />
                }

                {
                    ((multiply&&selected))&&(
                        <div className={'search-page-select-icons-item-diugou'}>
                            <img src={checkedimg} alt=""/>
                        </div>
                    )
                }
            </div>
        )
    }

    getClassName(index,choosed,selected_one,selected,multiply,hasLogo,imgError){
        if(multiply&&selected){
            return 'search-page-select-icons-item'
        }
        if(!multiply&&(selected_one==index)){
            return 'search-page-select-icons-item'
        }
        if(index==choosed){
            return 'search-page-select-icons-item'
        }
        else {
            if(!hasLogo||imgError){
               return 'search-page-select-icons-nologo'
            }
            return 'search-page-select-icons-item-normal'
        }

    }
}


class LogoImgError extends React.Component{
    constructor(){
        super()
        this.state = {
            img_error: false
        };
    }

    render(){
        const {item}=this.props
        const {picUrl,name}=item
        const {img_error}=this.state
        if(img_error){
           return (
               <div className={'search-icons-def-img'}>
                   <p>{name}</p>
               </div>
           )
        }
        return(
            <img
                src={picUrl}
                alt=""
                className={'search-page-select-supp-icon'}
                onError={() => {
                    this.setState({
                        img_error: true
                    },this.props.isImgError);
                }}
            />
        )
    }
}






